import React, { Component } from "react";

// createPortal用于将任意组件或者元素，渲染到父组件以外的指定位置去

// 只有当元素或者组件需要根据窗口进行定位的时候需要用到
// 弹出框,轻提示,警告,抽屉等
import { createPortal } from "react-dom";

class Child extends Component {
  state = {};
  fn = () => {
    console.log("child click");
  };
  render() {
    return createPortal(
      <div onClick={this.fn}>child子组件</div>,
      document.querySelector("body")
    );
  }
}

class App extends Component {
  state = {};
  fn = () => {
    console.log("app click");
  };
  render() {
    return (
      <div className="wrap">
        <h2>portal</h2>
        <div className="box" onClick={this.fn}>
          <Child />
        </div>
      </div>
    );
  }
}

export default App;
